import React, { Component } from 'react'
import SearchInput from "../searchInput/SearchInput";
import { NavBar } from 'antd-mobile'
import './category.scss'
import myaxios from '../../utils/myaxios'
import axios from "axios"
export default class Category extends Component {
    constructor(props) {
        super(props);
        const CancelToken = axios.CancelToken;
        this.source = CancelToken.source();
    }
    handleitemclick = (e) => {
        let select_index = e.target.getAttribute("data-index");
        console.log(select_index);
        this.setState({
            select_index: parseInt(select_index),
            categories_content: this.state.categories[select_index].children
        });
    }
    handleProductItemClick = (e) => {

        let cid = e.target.getAttribute("data-index");
        
        // console.log(this.props);
        // console.log(cid);
        this.props.history.push("/goodList/" + cid);
    };
    getCategories = (params) => {
        myaxios.get('categories', {
            cancelToken: this.source.token
        }).
            then((res) => {
                
                this.setCategories(res)
            }).catch((err) => {
                console.log(err);
            })
    }
    setCategories = (res, is_storaged) => {
        let categories_cache = {}
        if (!is_storaged) {
            categories_cache = {
                date: Date.now(),
                categories: res
            }
            localStorage.setItem('categories_cache', JSON.stringify(categories_cache))
        }

        
        this.setState({
            categories: res,
            categories_content: res[0].children,
        })

    }
    componentWillUnmount() {
        this.source.cancel("取消分类菜单的请求");
    }
    state = {
        categories: [],
        categories_content: [],
        select_index: 0, // 当前选中左边的菜单
    }
    componentDidMount() {

        let categories_cache = localStorage.getItem('categories_cache');
        if (categories_cache && JSON.parse(categories_cache).date) {
            let current_time = Date.now();
            let storage_time = JSON.parse(categories_cache).date;
            if (current_time - storage_time > 60 * 60 * 1000) {
                this.getCategories()
            } else {
                this.setCategories(JSON.parse(categories_cache).categories, true)
                //axios 获取的res是json对象，这里也要讲获取的localStorage.getItem("categories_cache")转换为json对象传入
            }
        } else {
            this.getCategories()
        }


    }
    render() {
        return (
            <div className='yg-category'>
                <div className="yg-index-nav">
                    <NavBar className="index-nav">优购商城</NavBar>
                </div>
                {/* 首页导航条结束 */}
                {/* 首页搜索框开始 */}
                <div className="yg-index-search">
                    <SearchInput></SearchInput>
                </div>
                {/* 首页搜索框结束 */}
                <div className="list-content" >
                    <div className="list-left" onClick={this.handleitemclick}>
                        {
                            this.state.categories.map((val, index) => {
                                return (
                                    <div
                                        className='onelist'
                                        data-index={index}
                                        key={
                                            val.cat_id
                                        }
                                    >
                                        <div
                                            data-index={index}
                                            className={
                                                this.state.select_index === index
                                                    ? "active onelist-title"
                                                    : "onelist-title"
                                            }>
                                            {val.cat_name}
                                        </div>
                                    </div>)
                            })}

                    </div>
                    <div className="list-right">
                        {
                            this.state.categories_content.map((v, index) => {
                                return (

                                    <div className='right-content' key={v.cat_id}>
                                        <div className='right-item-title' >
                                            {/* 标题开始 */}
                                            {'/'}
                                            {v.cat_name}
                                            {'/'}
                                            {/* 标题结束 */}

                                        </div>
                                        {
                                            v.children && v.children.map((v) => {
                                                return (

                                                    <div className='right-item-content'  >
                                                        <div className='image-wrapper'>
                                                            <img src={v.cat_icon} alt="" data-index={v.cat_id} onClick={this.handleProductItemClick} />
                                                        </div>
                                                        <div className='item-title'>
                                                            {v.cat_name}
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>



                                )




                            }
                            )}
                    </div>

                </div>
            </div>
        )
    }
}
